<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>{{ project_name }} - 测试报告</title>
    <style>
        body {
            font-family: "Microsoft YaHei", sans-serif;
            line-height: 1.6;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        
        .header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 5px;
        }
        
        .summary-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .summary-item {
            padding: 15px;
            border-radius: 5px;
            text-align: center;
            margin-bottom: 20px;
        }
        
        .summary-item h3 {
            margin: 0 0 10px 0;
            font-size: 16px;
        }
        
        .summary-item .number {
            font-size: 24px;
            font-weight: bold;
        }
        
        .total { background-color: #e9ecef; }
        .passed { background-color: #d4edda; }
        .failed { background-color: #f8d7da; }
        .error { background-color: #f8d7da; }
        .skipped { background-color: #fff3cd; }
        
        .info-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .info-table th,
        .info-table td {
            padding: 8px;
            border: 1px solid #dee2e6;
            text-align: left;
        }
        
        .info-table th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        
        .execution-detail {
            margin-bottom: 30px;
            border: 1px solid #dee2e6;
            border-radius: 5px;
            page-break-inside: avoid;
        }
        
        .execution-header {
            padding: 15px;
            background-color: #f8f9fa;
            border-bottom: 1px solid #dee2e6;
        }
        
        .execution-body {
            padding: 15px;
        }
        
        .execution-body pre {
            background-color: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            margin: 0;
            white-space: pre-wrap;
            word-wrap: break-word;
            font-size: 12px;
        }
        
        .result-pass { color: #28a745; }
        .result-fail { color: #dc3545; }
        .result-error { color: #dc3545; }
        .result-skip { color: #ffc107; }
        
        .error-message {
            color: #dc3545;
            padding: 10px;
            background-color: #f8d7da;
            border-radius: 4px;
            margin: 10px 0;
        }
        
        .page-break {
            page-break-after: always;
        }
        
        .footer {
            position: running(footer);
            text-align: center;
            font-size: 12px;
            color: #666;
            padding: 10px;
        }
        
        @page {
            @bottom-center {
                content: element(footer);
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>{{ project_name }} - 测试报告</h1>
        <p>
            执行时间：{{ start_time }} 至 {{ end_time }}<br>
            总耗时：{{ duration|floatformat:2 }} 秒
        </p>
    </div>

    <h2>基本信息</h2>
    <table class="info-table">
        <tr>
            <th width="20%">项目名称</th>
            <td>{{ project_name }}</td>
            <th width="20%">开始时间</th>
            <td>{{ start_time }}</td>
        </tr>
        <tr>
            <th>总用例数</th>
            <td>{{ summary.total_cases }}</td>
            <th>结束时间</th>
            <td>{{ end_time }}</td>
        </tr>
        <tr>
            <th>通过率</th>
            <td>{{ summary.pass_rate }}</td>
            <th>总耗时</th>
            <td>{{ duration|floatformat:2 }} 秒</td>
        </tr>
    </table>

    <h2>测试结果统计</h2>
    <div class="summary-grid">
        <div class="summary-item passed">
            <h3>通过数</h3>
            <div class="number">{{ summary.passed_cases }}</div>
        </div>
        <div class="summary-item failed">
            <h3>失败数</h3>
            <div class="number">{{ summary.failed_cases }}</div>
        </div>
        <div class="summary-item error">
            <h3>错误数</h3>
            <div class="number">{{ summary.error_cases }}</div>
        </div>
        <div class="summary-item skipped">
            <h3>跳过数</h3>
            <div class="number">{{ summary.skipped_cases }}</div>
        </div>
    </div>

    <div class="page-break"></div>

    <h2>执行详情</h2>
    {% for execution in execution_details %}
    <div class="execution-detail">
        <div class="execution-header">
            <table class="info-table">
                <tr>
                    <th width="20%">用例名称</th>
                    <td>{{ execution.case_name }}</td>
                    <th width="20%">执行结果</th>
                    <td class="result-{{ execution.result }}">{{ execution.result }}</td>
                </tr>
                <tr>
                    <th>接口名称</th>
                    <td>{{ execution.interface }}</td>
                    <th>执行耗时</th>
                    <td>{{ execution.duration|floatformat:2 }} 秒</td>
                </tr>
            </table>
        </div>
        
        <div class="execution-body">
            {% if execution.error_message %}
            <div class="error-message">
                {{ execution.error_message }}
            </div>
            {% endif %}
            
            <h4>请求数据</h4>
            <pre>{{ execution.request_data|pprint }}</pre>
            
            <h4>响应数据</h4>
            <pre>{{ execution.response_data|pprint }}</pre>
        </div>
    </div>
    
    {% if not forloop.last %}
    <div class="page-break"></div>
    {% endif %}
    {% endfor %}

    <div class="footer">
        报告生成时间：{{ generated_time }}
    </div>
</body>
</html> 